<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box">
		<view class="uni-global-title">
			修改技师
		</view>
		<view class="uni-global-body">
			<u-form :model="form" ref="form1" class="u-form" label-width="0" >
				<view class="u-form-textInput">
					<view class="u-form-name">
						用户头像
					</view>
					<u-form-item prop="head_image" :border-bottom="false">
						<uni-file-picker 
							v-model="head_image" file-mediatype="image"
							:image-styles="{width:'155'}"
							limit="1"
							@success="successImage('head_image',$event)"
						>
							<view class="u-form-image">
								<text class="iconfont icon-shangchuanyunduan"></text>
							</view>
						</uni-file-picker>
						
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						身份证正/反面
					</view>
					<u-form-item prop="" :border-bottom="false">
						<uni-file-picker 
							v-model="card_zheng" file-mediatype="image"
							:image-styles="{width:'155'}"
							limit="1"
							@success="successImage('card_zheng',$event,true)"
						>
							<view class="u-form-image">
								<text class="iconfont icon-shenfenzhengmian"></text>
							</view>
						</uni-file-picker>
						<uni-file-picker
							v-model="card_fan" file-mediatype="image"
							:image-styles="{width:'155'}"
							limit="1"
							@success="successImage('card_fan',$event,true)"
						>
							<view class="u-form-image"  >
								<text class="iconfont icon-shenfenfanmian"></text>
							</view>
						</uni-file-picker>
						
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						<text class="u-form-required">*</text>
						用户姓名
					</view>
					<u-form-item prop="name" :border-bottom="false">
						<u-input class="u-form-input"
							v-model="form.name" style="margin:0" 
							placeholder="请输入用户姓名"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						性别
					</view>
					<u-form-item prop="tags" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.sex" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						生日
					</view>
					<u-form-item prop="tags" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.birthday" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						身份证号码
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.id_card.card_id" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						身份证住址
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.id_card.address" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						民族
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.id_card.nation" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						失效日期
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.id_card.expiring_date" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						签发机关
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.id_card.organ" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						手机号
					</view>
					<u-form-item prop="mobile" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.mobile" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						自我介绍
					</view>
					<u-form-item prop="intro" :border-bottom="false">
						<u-input class="u-form-textarea" type="textarea" v-model="form.intro" 
							placeholder="自我介绍" 
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						技师照片 {{photo.length}}/9
					</view>
					<u-form-item prop="head_image" :border-bottom="false">
						<uni-file-picker 
							v-model="photo" file-mediatype="image"
							:image-styles="{width:'155'}"
							limit="9"
							@delete="deletePhoto"
							@success="successPhoto($event)"
						>
							<view class="u-form-image">
								<text class="iconfont icon-shangchuanyunduan"></text>
							</view>
						</uni-file-picker>
						
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						用户余额
					</view>
					<u-form-item prop="tags" :border-bottom="false">
						<u-input class="u-form-input" type="number" v-model="form.money" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						服务类型
					</view>
					<u-form-item prop="tags" :border-bottom="false">
						<u-checkbox-group  @change="changeClassify" >
							<u-checkbox v-model="item.checked" v-for="(item, index) in rangeClassify" :key="index" :name="item.value">
								{{ item.text }}
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						用户所在城市
					</view>
					<u-form-item prop="tags" :border-bottom="false">
					
					<uni-data-picker  popup-title="请选择用户所在城市" :localdata="city" v-model="form.location._id" @change="changeCity" >
						<view  class="selected">
							<u-form-item prop="tags" :border-bottom="false"  style="" >
								<view class="u-form-input-slot">
									<text :class="!form.location.text?'uni-global-label':''">{{ form.location.text?form.location.text:'请选择用户所在城市' }}</text>
									<text class="iconfont icon-xiajiantou" style="color:#c0c4cc" ></text>
								</view>
							</u-form-item>
						</view>
					</uni-data-picker>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						用户坐标
					</view>
					<u-form-item prop="tags" :border-bottom="false"  style="" >
						<u-input class="u-form-input" :disabled="true" type="select" @click="goUrl('/pages/system/map')" 
							v-model="coordinate" style="margin:0;" 
							placeholder="请选择用户坐标"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						所属门店
					</view>
					<u-form-item prop="tags" :border-bottom="false"  style="" >
						<u-input class="u-form-input" :disabled="true" type="select" @click="this.showShopList = true;" 
							v-model="form.shop.title" style="margin:0;" 
							placeholder="请选择所属店铺"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						接单状态
					</view>
					<u-form-item label="" prop=""  :border-bottom="false">
						<u-radio-group v-model="form.order_taking.value" @change="onExamineStatus" >
							<u-radio v-for="(item, index) in orderTaking" :key="index" :name="item.value"
								:disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item prop="tags" :border-bottom="false">
						<u-input class="u-form-input"  v-model="form.order_taking.time" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						账户状态
					</view>
					<u-form-item label="" prop=""  :border-bottom="false">
						<u-radio-group v-model="form.status.value" @change="changeStatus" >
							<u-radio v-for="(item, index) in status" :key="index" :name="item.value"
								:disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item prop="tags" :border-bottom="false">
						<u-input class="u-form-input"  v-model="form.status.text" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						是否确认条款
					</view>
					<u-form-item label="" prop=""  :border-bottom="false">
						<u-radio-group v-model="form.is_confirm_term" @change="changeStatus" >
							<u-radio v-for="(item, index) in conformTerm" :key="index" :name="item.value"
								:disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						已接单的数量
					</view>
					<u-form-item prop="orders" :border-bottom="false">
						<u-input class="u-form-input" type="number" v-model="form.orders" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						推荐人数量
					</view>
					<u-form-item prop="sell" :border-bottom="false">
						<u-input class="u-form-input" type="number" v-model="form.sell" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						收藏数量
					</view>
					<u-form-item prop="collect" :border-bottom="false">
						<u-input class="u-form-input" type="number" v-model="form.collect" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						评价数量
					</view>
					<u-form-item prop="collect" :border-bottom="false">
						<u-input class="u-form-input" type="number" v-model="form.comment.number" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						最新的一条评价
					</view>
					<u-form-item prop="collect" :border-bottom="false">
						<u-input class="u-form-input" v-model="form.comment.text" style="margin:0" />
					</u-form-item>
				</view>
				<u-button @click="submit" type="primary" >提交</u-button>
			</u-form>

		</view>
	</view>
	<u-toast ref="uToast" ></u-toast>
	<u-popup v-model="showShopList" mode="center" border-radius="10" z-index="9" >
		<view class="popup-box" >
			<view class="uni-global-title">
				选择所属店铺
			</view>
			<view class="popup-body">
				<view class="popup-item" v-for="(item,index) in shopList" :key="index" @click="clickShopInfo(item)" >
					<view class="popup-item-image">
						<view class="flex-layout">
							<u-image width="55px" height="55px" :src="item.logo" @click="eventImage(item.logo)"></u-image>
						</view>
					</view>
					<view class="">
						<view class="popup-item-title">
							{{item.title}}
						</view>
						<view class="popup-item-lable">
							"按摩保健"
						</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {rules,examineStatus,status,form,conformTerm,isTechnician,orderTaking } from "/common/js_file/user-list.js";
	import Util from "/common/util/util.js"
	const global = uniCloud.importObject("global",{customUI:true});
	export default {
		data() {
			return {
				loading:false,
				form,
				status,
				value: 1,
				conformTerm,// 是否确认条款
				isTechnician,// 是否为技师
				orderTaking,// 接单状态
				rangeClassify: [], // 服务类型
				head_image:[],// 用户头像
				card_zheng:[],// 身份证
				card_fan:[],// 身份证
				coordinate:'',// 用户位置
				city:[], // 城市列表
				photo:[],// 技师照片
				showShopList:false,// 显示店铺列表
				shopList:[],// 店铺列表
				examineStatus:examineStatus,
				rules:rules,
			}
		},
		onLoad(val) {
			if(val.uid){
				this.uid = val.uid ;
				this.getData() ;
				this.getShop() ;
			}else{
				this.$refs.uToast.show({
					title: '环境异常',type: 'error',duration:500,position:'top',
					url: '/pages/user/user-list/user-list'
				})
			}
			this.getGity();
			this.getClassify();
			// 接收地图返回数据
			uni.$on("address-select",  (res,event)=>{
				this.getAddressData(res,event)
			})
		},
		methods: {
			async submit() {
				this.$refs.form1.validate( async valid => {
					if (valid) {
						this.loading = true ;
						return this.update(this.form);
					} else {
						this.$refs.uToast.show({
							title: '校验失败',
							type: 'primary',duration:500,position:'top',
						})
					}
				});
			},
			update(form){
				form.money = parseInt(form.money * 100);
				form.orders = parseInt(form.orders);
				form.sell = parseInt(form.sell);
				form.collect = parseInt(form.collect);
				form.comment.number = parseInt(form.comment.number);
				form.location.title = form.location.text;
				delete form.location.text ;
				delete form._id;
				// return console.log(form);
				global.updateData('userinfo',form,{_id:this.uid}).then(res =>  {
					this.loading = false ;
					this.$refs.uToast.show({
						title: '修改成功',type: 'success',duration:500,
						position:'top',url: '/pages/user/user-list/user-list'
					})
				})
			},
			// 上传图片
			successImage(field,event,idCard=false){
				let filePath = event.tempFilePaths[0];
				if(!idCard) return this.form[field] =  filePath ;
				this.form.id_card[field] =  filePath;
				if(field == 'card_zheng'){
					global.ocrIdCard(filePath,'idcard').then(result => {
						const words = result.data.words_result;
						this.form.id_card.card_id = words["公民身份号码"].words;
						this.form.id_card.address = words["住址"].words;
						this.form.id_card.nation = words["民族"].words;
						this.form.name = words["姓名"].words ;
						this.form.sex = words["性别"].words ;
						this.form.birthday = words["出生"].words ;
					})
				}
				else if(field == 'card_fan'){
					global.ocrIdCard(filePath,'idcard').then(result => {
						const words = result.data.words_result;
						this.form.id_card.expiring_date = words["失效日期"].words;
						this.form.id_card.organ = words["签发机关"].words;
					})
				}
			},
			// 上传照片
			successPhoto(ev){
				this.form.photo.push(...ev.tempFilePaths);
			},
			// 移除照片
			deletePhoto(ev){
				global.deleteFile([ev.tempFilePath]);
				this.form.photo.splice(ev.index,1);
				this.photo.splice(ev.index,1);
			},
			// 账户状态
			changeStatus(ev){
				this.form.status.text = this.status[ev].name;
			},
			// 审核状态
			onExamineStatus(ev){
				this.form.examine_status.text = this.examineStatus[ev].name;
				this.form.examine_status.datetime = Date.now();
			},
			// 选择服务类型
			changeClassify(ev){
				this.form.classify = this.rangeClassify.filter( item => {
					for (var i = 0; i < ev.length; i++) {
						if(ev[i] == item._id) return item ;
					}
				})
				.map(item => {return {_id:item.value,title:item.text} });
			},
			// 接收坐标
			getAddressData(res){
				this.form.coordinate = res.location;
				this.coordinate = res.location.coordinates.join(',')
			},
			// 获取服务类型
			getClassify(){
				let _this = this;
				global.getList('classify',{is_show:1},"_id desc","title as text,is_show,_id,_id as value",0,999).then( result =>{
					this.rangeClassify = result.data.map( item => {
						for (var i = 0; i < this.form.classify.length; i++) {
							if(item._id == this.form.classify[i]._id){
								item.checked = true ;
							}
						}
						return item;
					} );
				} )
			},
			// 获取店铺信息
			getShop(){
				const filed = "_id,title,logo,score,type,status,examine_status,create_date " ;
				const where ={
					"examine_status.value":1,
					"status.value":0,
				}
				global.getList('shop',where,"create_date desc",filed,0,999).then(result => {
					const data = result.data ;
					this.shopList = data;
				})
			},
			// 选择所属店铺
			clickShopInfo(item){
				this.form.shop.title = item.title;
				this.form.shop._id = item._id;
				this.form.shop.logo = item.logo;
				this.showShopList = false;
				return	this.$refs.uToast.show({title: '选择成功',type: 'success',duration:800,position:'top',})
			},
			// 选择城市
			changeCity(ev){
				this.form.location = ev.detail.value[0];
			},
			// 获取城市列表
			getGity(){
				global.getList('city',{},"sort asc","title as text,_id,_id as value",0,999).then( result =>{
					this.city = result.data;
				} )
			},
			goUrl(Url){
				uni.navigateTo({url:Url})
			},
			// 获取修改默认数据
			getData(){
				this.loading = true ;
				let field = " intro,head_image,name,sex,mobile,birthday,photo,id_card,orders,sell,collect,comment,shop,classify,location,order_taking,is_technician,is_confirm_term,money,coordinate,examine_status,status ";
				global.getOne('userinfo',{_id:this.uid},field).then(res => {
					let data = res.data;
					this.form = data;
					this.form.examine_status = data.examine_status?data.examine_status:{"text": '审核通过',"value": 1,"datetime": Date.now()};
					this.form.status = data.status?data.status:{"value": 0,"text": '正常'};
					this.form.order_taking = data.order_taking?data.order_taking:{"value": 0,"time":''};
					this.form.money = parseInt(data.money / 100)
					if(data.location){
						this.form.location = {
							text:data.location.title,
							_id:data.location._id
						}
					}else {    
						this.form.location ={"_id":'',"text":''};
					}
					if(data.photo){
						this.photo = data.photo.map(image => {
							return {url:image}
						})
					}
					this.form.classify = data.classify ?data.classify :[]; 
					this.head_image = {url:data.head_image};
					this.card_fan = {url:data.id_card.card_fan};
					this.card_zheng = {url:data.id_card.card_zheng};
					this.coordinate = data.coordinate?data.coordinate.coordinates?data.coordinate.coordinates.join(','):'':'';
					this.loading = false ;
				})
			},
			// 图片放大
			eventImage(image) {
				if(typeof image == 'string'){
					image = [image];
				}
				uni.previewImage({
					urls: image,
				});
			},
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		}
	}
</script>

<style scoped lang="scss">
	.popup-box{
		width:500px;
		padding:10px;
		border-radius: 10px;
		height:500px;
		color:$uni-text-color-placeholder;
		.popup-item{
			display: flex;
			background-color: #f8f8f8;
			padding:5px;
			gap:10px;
			border-radius: 5px;;
			margin-bottom:10px;
		}
		.popup-item-title{
			line-height: 25px;
			font-weight: bold;
		}
		.popup-item:hover{
			transition:.3s;
			cursor: pointer;
			background-color: #e5e5e5;
		}
		.popup-body{
			height:400px;
			overflow: auto;
		}
	}
	.body {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
</style>